<template>
  <div class="goods-images">
      <div class="large" v-show="show"  :style="[{backgroundImage:`url(${images[currIndex]})`},bgPosition]"></div>
      <div class="middle" ref=target>
          <img :src="images[currIndex]" alt="">
          <div v-show="show" class="layer" :style="position"></div>
      </div>
      <ul class="small">
          <li v-for="(item,index) in images" :key="item" :class="{active:index===currIndex}">
              <img :src="item" alt="" @mouseenter="currIndex=index">
          </li>
      </ul>
  </div>
</template>

<script>
import {ref,reactive,watch} from 'vue'
import { useMouseInElement } from '@vueuse/core'
export default {
    name:'GoodsImage',
    props:{
        images:{
            type:Array,
            default:()=>[]
        }
    },
    setup(){
         const currIndex = ref(0)
         const show=ref(false)
         const target=ref(null)
         //  elementX/Y:鼠标基于容器左上角X/Y轴偏移, isOutside:鼠标是否在模板容器外
         const {elementX, elementY, isOutside} =useMouseInElement(target)
         const position = reactive({ left: 0, top: 0 })  // 遮罩层位置
         const bgPosition = reactive({ backgroundPositionX: 0, backgroundPositionY: 0 }) // 放大图位置

        //  监听遮罩层的移动
        watch([elementX,elementY,isOutside],()=>{
             // 图片盒子大小400px 遮罩层200px 
             // 控制X轴方向的定位 0-200 之间
             if(elementX.value < 100){position.left=0}
             else if(elementX.value > 300){position.left=200}
             else{position.left=elementX.value-100}

              // 控制Y轴方向的定位 0-200 之间
             if (elementY.value < 100) position.top = 0
             else if (elementY.value > 300) position.top = 200
             else position.top = elementY.value - 100
             // 设置大背景的定位
             bgPosition.backgroundPositionX = -position.left * 2 + 'px'
             bgPosition.backgroundPositionY = -position.top * 2 + 'px'
             // 设置遮罩容器的定位
             position.left = position.left + 'px'
             position.top = position.top + 'px'
             // 设置是否显示预览大图
             show.value = !isOutside.value
        })

        return { currIndex,show,position ,bgPosition,target}
    }
}
</script>

<style lang="less" scoped>
@import '~@/assets/styles/variables.less';
.goods-images{
    display: flex;
    width: 480px;
    height: 400px;
    position: relative;
    // z-index: 999;
    .large{
        position: absolute;
        top:0;
        left: 500px;
        height: 400px;
        width: 400px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        background-repeat: no-repeat;
        background-size: 800px 800px;
        background-color: #f8f8f8;
        // display: none;
    }
    .middle{
        height: 400px;
        width: 400px;
        background: #f5f5f5;
        position: relative;
        cursor: move;
        .layer{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background: rgba(0,0,0,0.2);
        }
    }
    .small{
        width: 80px;
        li{
            width: 68px;
            height: 68px;
            margin-left: 20px ;
            margin-bottom: 15px;
            cursor: pointer;
            &:hover,&.active {
                border: 2px solid @xtxColor;
            }
        }
    }
}
</style>